<template>
  <template v-if="mode === 'edit'">
    <el-form ref="mirrorFormRef" :model="mirrorDataRef" label-width="90px" :rules="mirrorFormRules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="设备IP地址" prop="device_ip">
            <el-input v-model="mirrorDataRef.device_ip" placeholder="请输入IP地址" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备类型" prop="device_type">
            <el-select class="m-full-width" v-model="mirrorDataRef.device_type" placeholder="请选择设备类型" clearable>
              <el-option label="交换机" :value="0"></el-option>
              <el-option label="路由器" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名" prop="device_username">
            <el-input v-model="mirrorDataRef.device_username" placeholder="请输入用户名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="device_password">
            <el-input v-model="mirrorDataRef.device_password" placeholder="请输入密码" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="源端口" prop="source">
            <el-input v-model="mirrorDataRef.source" placeholder="请输入源端口" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的端口" prop="destination">
            <el-input v-model="mirrorDataRef.destination" placeholder="请输入目的端口" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button @click="handleDialogReset">清 空</el-button>
          <el-button type="primary" @click="handleDialogSave">保 存</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </template>
  <template v-else>
    <div class="icafe-cnk">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="设备IP地址">{{ mirrorDataRef.device_ip }}</el-descriptions-item>
        <el-descriptions-item label="设备类型">
          {{ mirrorDataRef.device_type == 0 ? '交换机' : mirrorDataRef.device_type == 1 ? '路由器' : '未知设备' }}
        </el-descriptions-item>
        <el-descriptions-item label="用户名">{{ mirrorDataRef.device_username }}</el-descriptions-item>
        <el-descriptions-item label="密码">{{ mirrorDataRef.device_password }}</el-descriptions-item>
        <el-descriptions-item label="源端口">{{ mirrorDataRef.source }}</el-descriptions-item>
        <el-descriptions-item label="目的端口">{{ mirrorDataRef.destination }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </template>
</template>

<script lang="ts">
import { defineComponent, nextTick, ref } from 'vue'
import { ElForm, ElMessage } from 'element-plus'
import * as IcafeMirrorApi from '@/api/customer/icafe-mirror'
import { copy } from '@/utils/common'
import { NOOP } from '@/utils/helpers'

export default defineComponent({
  name: 'IcafeAdsl',
  props: {
    icafeId: {
      type: Number,
      required: true
    },
    mode: String
  },
  setup(props) {
    const mirrorFormRef = ref<InstanceType<typeof ElForm>>()
    const defaultMirrorData = {
      device_ip: '',
      device_type: '',
      device_username: '',
      device_password: '',
      source: '',
      destination: ''
    }
    const mirrorDataRef = ref({ ...defaultMirrorData })

    const mirrorFormRules = {
      device_ip: [
        {
          pattern: /^((2(5[0-5]|[0-4]\d))|1\d{2}|[1-9]?\d)(\.((2(5[0-5]|[0-4]\d))|1\d{2}|[1-9]?\d)){3}$/,
          message: '格式不正确',
          trigger: 'blur'
        }
      ]
    }

    // 获取
    const getData = () => {
      IcafeMirrorApi.getData({ icafe_id: props.icafeId }).then((res) => {
        copy(mirrorDataRef.value, res.data)
      })
    }

    // 请求数据
    getData()

    // 清空按钮事件
    const handleDialogReset = () => {
      mirrorDataRef.value = { ...defaultMirrorData }
      // 使用 nextTick，防止清空表单时消除验证错误提示
      nextTick(() => {
        mirrorFormRef.value?.validate(NOOP)
      })
    }

    // 保存按钮事件
    const handleDialogSave = () => {
      mirrorFormRef.value?.validate((isValid) => {
        if (isValid) {
          IcafeMirrorApi.saveData({ ...mirrorDataRef.value, icafe_id: props.icafeId })
            .then((res) => {
              ElMessage.success('保存成功')
            })
            .catch((error) => {
              ElMessage.error(error)
            })
        }
      })
    }

    return { mirrorFormRef, mirrorDataRef, mirrorFormRules, handleDialogReset, handleDialogSave }
  }
})
</script>

<style lang="less" scoped>
.icafe-cnk :deep {
  .el-descriptions__label {
    width: 20%;
  }
  .el-descriptions__content {
    width: 30%;
  }
}
</style>
